<template>
<!-- 首页 -->
  <div class="home">

    <!-- 面试题：页面出现弹框的时候，弹框后看见了弹框底层的页面内容，如何解决？？ -->
     <transition name="van-fade">
       <!-- 给首页内容套一个div v-show 通过路径的值来决定是否展示， 为了避免即刻消失，外加一个transition  name="van-fade" 解决立刻消失的问题-->
    <div v-if="$route.path==='/home'">
      <!-- 首页顶部搜索栏 -->
      <van-search
        shape="round"
        placeholder="请输入搜索关键词"
        disabled
        @click="searchClick"
      />
      <!-- 首页banner轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img :src="item.image_url" alt="" width="100%">
        </van-swipe-item>
      </van-swipe>

      <!-- 【增】首页频道 -->
      <Grid :channelArr="channelArr" />
      <!-- 【增】首页专题精选 -->
      <Topic :topicList="topicList" />
      <div>
        <p>第1个p标签</p>
        <p>第2个p标签</p>
        <p>第3个p标签</p>
        <p>第4个p标签</p>
        <p>第5个p标签</p>
        <p>第6个p标签</p>
        <p>第7个p标签</p>
        <p>第8个p标签</p>
        <p>第9个p标签</p>
        <p>第10个p标签</p>
      </div>
    </div>
    </transition>    


    <!-- 黑色遮罩层 -->
    <transition name="van-fade">
      <div class="popup-shadow" v-show="isShowShadow"></div>
    </transition>     

    <!-- 展示搜索弹出窗 -->
    <transition name="van-slide-right">
       <router-view></router-view>
    </transition>

    
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Grid from "../components/home/Grid";
import Topic from "../components/home/Topic";
import {mapState,mapMutations} from "vuex"
import {GetHomeData} from "@/request/api"
export default {
  name: 'Home',
  data(){
    return{
      banner:[],
      // 频道数据
      channelArr: [],
      // 专题数据
      topicList: [],
    }
  },
  computed:{
    ...mapState({
      isShowShadow:state=>state.showshadow.isShowShadow
    })
  },
  async created(){  //async + await 处理异步函数嵌套异步函数的终极解决方案
    // 经验： 一般 await 后面放的是 promise对象。
    // this.chanIsShowShadow(false)
    let res = await GetHomeData();

    let {banner,channel,topicList} = res.data;
    this.banner = banner;
    this.channelArr = channel;
    this.topicList = topicList;

    // 第一个请求成功之后，才会发起第二个请求
    // let res2 = await XXX();
    // res2
    

  },
  methods:{
    ...mapMutations({
      chanIsShowShadow:"showshadow/chanIsShowShadow"
    }),
    searchClick(){
        this.$router.push('/home/searchpopup');
        // 修改Vuex中的isShowShadow的值，本质上是要调用Vuex中的chanIsShowShadow方法
        this.chanIsShowShadow(true)
    }
  },
  // 这不是路由守卫，只是用来监听父子级关系的路由的切换
  // watch:{
  //   $route(to,from){
  //     // console.log("to为：",to);
  //     // console.log("from为：",from);
  //     if(to.path==="/home"){
  //       this.chanIsShowShadow(false)
  //     }
  //   }
  // },
  components: {
    Grid,Topic
  }
}
</script>

<style lang="less" scoped>
  // Vue的过渡效果的写法：(注意事项，在过渡盒子身上不要书写这个需要过渡的属性) 
  // 进入过渡的初始状态，以及离开过渡的结束状态
  // .slide-enter,.slide-leave-to{
  //    right: -100%;
  // }

  // // 过渡时间的设置
  // .slide-enter-active,.slide-leave-active{
  //   transition: all .5s;
  // }

  // // 进入过渡的结束状态，以及离开过渡的初始状态
  // .slide-enter-to, .slide-leave{
  //   right:0;
  // }
.home{
  padding-bottom: .5rem;
}
  .popup-shadow{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.7);
    z-index:99;
  }
</style>
